<!DOCTYPE html>
<html>
<head>
    <title>Keyboard navigation</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example">
            <div class="demo-section k-header">
                <h4>Choose country: </h4>
                <input id="countries" style="width: 400px" accesskey="w" />
            </div>

            <div class="box">
	    <h4>Keyboard legend</h4>
	    <ul class="keyboard-legend">
                <li>
                    <span class="button-preview">
                        <span class="key-button leftAlign wider"><a target="_blank" href="http://en.wikipedia.org/wiki/Access_key">Access key</a></span>
                        +
                        <span class="key-button">w</span>
                    </span>
                    <span class="button-descr">
                        focuses the widget
                    </span>
                </li>
		<li>
                    <span class="button-preview">
                        <span class="key-button wide leftAlign">up arrow</span>
                    </span>
                    <span class="button-descr">
                        highlights previous item
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button wider leftAlign">down arrow</span>
                    </span>
                    <span class="button-descr">
                        highlights next item
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button wider rightAlign">enter</span>
                    </span>
                    <span class="button-descr">
                        selects highlighted item
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">esc</span>
                    </span>
                    <span class="button-descr">
                        closes the popup
                    </span>
                </li>
            </ul>
	    </div>

            <script>
                $(document).ready(function () {
                    var data = [
                            "Albania",
							"Andorra",
							"Armenia",
							"Austria",
							"Azerbaijan",
							"Belarus",
							"Belgium",
							"Bosnia & Herzegovina",
							"Bulgaria",
							"Croatia",
							"Cyprus",
							"Czech Republic",
							"Denmark",
							"Estonia",
							"Finland",
							"France",
							"Georgia",
							"Germany",
							"Greece",
							"Hungary",
							"Iceland",
							"Ireland",
							"Italy",
							"Kosovo",
							"Latvia",
							"Liechtenstein",
							"Lithuania",
							"Luxembourg",
							"Macedonia",
							"Malta",
							"Moldova",
							"Monaco",
							"Montenegro",
							"Netherlands",
							"Norway",
							"Poland",
							"Portugal",
							"Romania",
							"Russia",
							"San Marino",
							"Serbia",
							"Slovakia",
							"Slovenia",
							"Spain",
							"Sweden",
							"Switzerland",
							"Turkey",
							"Ukraine",
							"United Kingdom",
							"Vatican City"
                        ];

                    //create AutoComplete UI component
                    $("#countries").kendoAutoComplete({
                        dataSource: data,
                        filter: "startswith",
                        placeholder: "Select country...",
                        separator: ", "
                    });
                });
            </script>

            <style scoped>
                .demo-section,
		#example .box {
                    width: 400px;
                }
            </style>
        </div>


    
    
</body>
</html>
